<template>
	<main-container>
		<!-- 搜索 -->
		<el-form :model="state.queryParams" ref="queryRef" :inline="true" v-show="showSearch">
			<el-form-item label="退款单号">
				<el-input v-model="state.queryParams.refundTradeNo" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="initPage">
					<el-icon> <ele-Search /> </el-icon>搜索</el-button
				>
				<el-button @click="resetQuery">
					<el-icon> <ele-Refresh /> </el-icon> 重置</el-button
				>
			</el-form-item>
		</el-form>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div></div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch" @refresh="initPage"></right-toolbar>
		</div>
		<!-- 列表 -->
		<el-table v-loading="loading" :data="state.tableData" border>
			<el-table-column prop="refundTradeNo" label="退款单号" />
			<el-table-column prop="outTradeNo" label="支付单号" />
			<el-table-column prop="payAmount" label="支付金额" />
			<el-table-column prop="refundAmount" label="退款金额" />
			<el-table-column prop="extra" label="额外参数" />
			<el-table-column prop="refundStatus" label="退款状态">
				<template #default="scope">
					<el-tag v-if="scope.row.refundStatus == '0'" type="info">待退款</el-tag>
					<el-tag v-if="scope.row.refundStatus == '1'" type="success">退款中</el-tag>
					<el-tag v-if="scope.row.refundStatus == '2'" type="success">已退款</el-tag>
					<el-tag v-if="scope.row.refundStatus == '3'" type="error">退款失败</el-tag>
				</template>
			</el-table-column>

			<el-table-column prop="notifyUrl" label="通知地址" />
			<el-table-column prop="paySuccessTime" label="支付成功时间" />
			<el-table-column prop="createTime" label="创建时间" />
		</el-table>
		<!-- 分页 -->
		<pagination
			v-model:total="state.page.total"
			v-model:currentPage="state.page.currentPage"
			v-model:pageSize="state.page.pageSize"
			@changePage="initPage"
		></pagination>
	</main-container>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { getPage } from '/@/api/pay/payrefundorder';
const state = reactive({
	queryParams: {
		refundTradeNo: '',
	},
	page: {
		total: 0, // 总页数
		currentPage: 1, // 当前页数
		pageSize: 10, // 每页显示多少条
	},
	tableData: [],
});
const showSearch = ref(true);
const loading = ref(false);
const initPage = async () => {
	loading.value = true;
	let params = {
		current: state.page.currentPage,
		size: state.page.pageSize,
		descs: 'create_time',
	};
	await getPage(Object.assign(params, state.queryParams))
		.then((response: any) => {
			state.tableData = response.data.data.records;
			state.page.total = response.data.data.total;
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 重置搜索表单
 */
const resetQuery = () => {
	state.queryParams = { refundTradeNo: '' };
};
initPage();
</script>
